<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<p>这是p</p>
	<button>这是button</button>
	<script type="text/javascript">
		/*
			两种方法：
				1.----on*** 传统写法 on+ 事件类型  onclick onmouseup
				   特点：添加的事件具有唯一性，同一个元素同一个事件只能设置一个函数,后面覆盖前面
				2.addEventListener( event, function,布尔值 )	 ie8以下的版本不支持
					特点：同一个元素同一个事件类型可以绑定多个，并且按照顺序执行
					event:事件名 click mouseup  不加on
					function:触发事件后执行的方法
					布尔值:不必填  默认-false 表示冒泡阶段处理函数  true-事件捕获阶段处理函数

		*/
		let p = document.querySelector('p')
		// p.onclick = function(){
		// 	console.log("第一个onclick")
		// }
		// p.onclick = function() {
		// 	console.log("第二个oncilck")
		// }
		function fn(){
			console.log('第二个')
		}
		p.addEventListener('click', function(){
			console.log('第一个addEventListener')
		})
		p.addEventListener('click', fn, true)

		//解绑事件
		let btn = document.querySelector('button')
		btn.addEventListener('click' function(){
			// 只能移除命名函数,匿名函数不能移除
			p.removeEventListener('click', fn, true)
		})
	</script>
</body>
</html>